<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(215, 237, 238);
            background-image: url(1.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }
        
        .big {
            width: 1400px;
        }
        
        .first {
            padding: 20px;
            margin: 50px;
        }
        
        .first .ying {
            color: #487795;
            text-align: center;
            font-size: 50px;
            position: relative;
            top: 100px;
            animation: diyi 5s infinite reverse;
        }
        
        .first .zhong {
            color: #487795;
            text-align: center;
            font-size: 25px;
            position: relative;
            top: 85px;
            animation: diyi 5s infinite reverse;
        }
        
        .logo {
            font-family: sans-serif;
            font-size: 50px;
        }
        
        .smollfirst {
            background-color: #d2f6f2;
            width: 90px;
            height: 250px;
            position: fixed;
            right: 0px;
            top: 100px;
        }
        
        .smollfirst a {
            font-size: 20px;
            color: #3b899f;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
        }
        
        .smollfirst a:hover {
            text-decoration: none;
            background-color: #ffffff;
            letter-spacing: 5px;
            font-size: 25px;
        }
        
        .mollfirst {
            width: 50px;
            height: 220px;
            background-color: #d2f6f2;
            padding: 5px 20px;
            z-index: 10;
        }
        
        .sxsct {
            width: 110px;
            height: 7px;
            background-color: #6a99b7;
            position: relative;
            bottom: 103px;
            left: 800px;
        }
        
        .sxhct {
            width: 7px;
            height: 90px;
            background-color: #6a99b7;
            position: relative;
            bottom: 10px;
            left: 900px;
        }
        
        .xxsct {
            width: 110px;
            height: 7px;
            background-color: #6a99b7;
            position: relative;
            bottom: 8px;
            left: 280px;
        }
        
        .xxhct {
            width: 7px;
            height: 90px;
            background-color: #6a99b7;
            position: relative;
            bottom: 98px;
            left: 280px;
        }
        
        .geren {
            background-color: #ccfaf8;
            width: 50px;
            height: 90px;
            position: relative;
            top: 30px;
            left: 70px;
            text-align: center;
            font-size: 23px;
            animation: diyi 2s infinite reverse;
        }
        
        .geren p {
            color: #388ea9;
        }
        
        .second img {
            width: 350px;
            height: 330px;
            position: relative;
            top: 70px;
            left: 220px;
            z-index: 2;
        }
        
        .dyh {
            width: 260px;
            height: 40px;
            background-color: #c4e0ec;
            position: relative;
            bottom: 310px;
            left: 700px;
        }
        
        .zuo {
            width: 320px;
            height: 300px;
            background-color: #c4e0ec;
            position: relative;
            bottom: 220px;
            left: 85px;
            z-index: 1;
        }
        
        .you {
            width: 400px;
            height: 270px;
            background-color: #c4e0ec;
            position: relative;
            bottom: 850px;
            left: 800px;
            z-index: -1;
        }
        
        .neirongyi {
            color: #10658e;
            width: 300px;
            height: 50px;
            position: relative;
            bottom: 350px;
            left: 750px;
            font-size: 22px;
        }
        
        .neironger {
            width: 370px;
            height: 200px;
            position: relative;
            bottom: 610px;
            left: 700px;
            font-size: 20px;
            text-align: center;
            color: #10658e;
        }
        
        .neirongsan {
            width: 200px;
            height: 50px;
            position: relative;
            bottom: 680px;
            left: 780px;
            color: #10658e;
            font-size: 22px;
        }
        
        .neirongsi {
            color: #10658e;
            font-size: 20px;
            position: relative;
            bottom: 680px;
            left: 750px;
            line-height: 20px;
        }
        
        .zuopin {
            background-color: #ccfaf8;
            width: 50px;
            height: 90px;
            position: relative;
            top: 30px;
            left: 70px;
            text-align: center;
            font-size: 23px;
            animation: diyi 2s infinite reverse;
        }
        
        .zuopin p {
            color: #388ea9;
        }
        
        .second {
            height: 800px;
        }
        
        .sheji {
            font-family: sans-serif, "微软雅黑", "宋体";
            font-size: 30px;
            color: #758ba2;
            position: relative;
            top: -25px;
            left: 250px;
        }
        
        .third .yi {
            width: 278px;
            height: 382px;
        }
        
        .third .yi:hover {
            width: 300px;
            height: 409px;
        }
        
        .third .san {
            width: 278px;
            height: 382px;
        }
        
        .third .san:hover {
            width: 300px;
            height: 409px;
        }
        
        .third .er {
            width: 336px;
            height: 478px;
        }
        
        .third .er:hover {
            width: 350px;
            height: 500px;
        }
        
        .third img {
            vertical-align: middle;
            position: relative;
            left: 100px;
            top: 100px;
        }
        
        .third .datu {
            display: inline-block;
            margin: auto 50px;
        }
        
        .fourth .fyi {
            width: 336px;
            height: 478px;
        }
        
        .fourth .fyi:hover {
            width: 350px;
            height: 500px;
        }
        
        .fourth .fsan {
            width: 336px;
            height: 478px;
            z-index: -1;
        }
        
        .fourth .fsan:hover {
            width: 350px;
            height: 500px;
        }
        
        .fourth .fer {
            width: 278px;
            height: 382px;
        }
        
        .fourth .fer:hover {
            width: 300px;
            height: 409px;
        }
        
        .fourth img {
            vertical-align: middle;
            position: relative;
            left: 130px;
            top: 100px;
        }
        
        .fourth .fdatu {
            display: inline-block;
            margin: auto 50px;
        }
        
        .fourth {
            margin: 50px auto;
        }
        
        .jineng {
            background-color: #ccfaf8;
            width: 50px;
            height: 90px;
            position: relative;
            top: 120px;
            left: 70px;
            text-align: center;
            font-size: 23px;
            animation: jian 2s infinite reverse;
        }
        
        .jineng p {
            color: #388ea9;
        }
        
        .shouhui {
            width: 200px;
            height: 200px;
            background-color: #7ab9d8;
            position: relative;
            border-radius: 100px;
            top: 280px;
            left: 300px;
            text-align: center;
            font-size: 70px;
            color: #ffffff;
            animation: move 5s infinite reverse;
        }
        
        .sshouhui {
            width: 140px;
            height: 90px;
            background-color: #7ab9d8;
            position: relative;
            top: 47px;
            left: 23px;
            border-radius: 40px;
            animation: move 5s infinite reverse;
        }
        
        .sshouhui a {
            color: #ffffff;
            text-decoration: none;
        }
        
        .sshouhui a:hover {
            color: #ffffff;
            text-decoration: none;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(10px 10px);
                background-color: rgb(135, 222, 222);
            }
            100% {
                transform: translate(0, 50px) rotate(180deg) scale(1);
            }
        }
        
        .ps {
            width: 160px;
            height: 160px;
            background-color: #7ab9d8;
            position: relative;
            border-radius: 80px;
            top: -50px;
            left: 700px;
            text-align: center;
            font-size: 60px;
            color: #ffffff;
            /*animation: move 5s infinite reverse;*/
        }
        
        .sps {
            width: 100px;
            height: 60px;
            background-color: #7ab9d8;
            position: relative;
            top: 30px;
            left: 22px;
            animation: animate 10s infinite reverse;
        }
        
        .sps a {
            color: #ffffff;
            text-decoration: none;
        }
        
        .sps a:hover {
            color: #ffffff;
            text-decoration: none;
        }
        
        @keyframes animate {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(0);
            }
            100% {
                transform: translate(0, 0) rotate(360deg) scale(1);
            }
        }
        
        .ai {
            width: 160px;
            height: 160px;
            background-color: #7ab9d8;
            position: relative;
            border-radius: 80px;
            top: -10px;
            left: 900px;
            text-align: center;
            font-size: 60px;
            color: #ffffff;
        }
        
        .sai {
            width: 100px;
            height: 60px;
            background-color: #7ab9d8;
            position: relative;
            top: 30px;
            left: 22px;
            animation: animate 10s infinite reverse;
        }
        
        .sai a {
            color: #ffffff;
            text-decoration: none;
        }
        
        .sai a:hover {
            color: #ffffff;
            text-decoration: none;
        }
        
        .zneirong {
            width: 1000px;
            height: 100px;
            background-color: #8ccecc;
            position: relative;
            top: 300px;
            left: 100px;
            font-size: 20px;
        }
        
        .liuyan {
            position: relative;
            top: 290px;
            left: 600px;
            font-size: 20px;
            color: #4c9fb8;
        }
        
        .last {
            height: 500px;
        }
        
        .xlianx {
            color: #4c9fb8;
            position: relative;
            top: 333px;
            left: 560px;
            font-size: 20px;
            animation: diyi 7s infinite reverse;
        }
        
        .fangs {
            color: #0f4f63;
            position: relative;
            top: 400px;
            left: 520px;
            font-size: 20px;
        }
        
        @keyframes jian {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(10px, 10px);
            }
            100% {
                transform: translate(0, 0)
            }
        }
        
        @keyframes diyi {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: translate(0px, 0px)
            }
        }
    </style>

</head>

<body>
    <div class="big">
        <div class="first">
            <p class="ying">SMLING TREAT LIFE</p>
            <P class="zhong">你所看见的，只是我想让你看见的。</P>
            <div class="smollfirst">
                <div class="mollfirst">
                    <a href="#SHOUYE">首页</a>
                    <a href="#GEREN">个人</a>
                    <a href="#ZUOPIN">作品</a>
                    <a href="#JINENG">技能</a>
                    <a href="#LIANXIWO">联系</a>
                </div>
            </div>


            <div class="sxhct"></div>
            <div class="xxsct"></div>
            <div class="xxhct"></div>
        </div>
        <h2 id="GEREN"></h2>
        <div class="second">
            <div class="geren">
                <p>个</p>
                <p>人</p>
            </div>
            <img src="2.jpg" alt="#">
            <div class="dyh"></div>
            <div class="neirongyi">
                <p>某不知名的网页设计师</p>
            </div>
            <div class="zuo"></div>
            <div class="neironger">在学艺术与科技专业，目前大二，学习了立体构成，平面构成，版式设计，html网页设计，ps，ai等</div>
            <div class="neirongsan">另外，我还是......</div>
            <div class="neirongsi">
                <p>国 家 一 级 嗜 睡 症 演 员</p>
                <p>国 家 一 级 退 堂 鼓 鼓 手</p>
                <p>赖 床 锦 标 赛 冠 军 得 主</p>
                <p>贫 困 大 赛 形 象 代 言 人</p>
            </div>
            <div class="you"></div>
        </div>
        <h3 id="ZUOPIN"></h3>
        <div class="third">
            <div class="zuopin">
                <p>作</p>
                <p>品</p>
            </div>
            <div class="sheji">设计作品</div>
            <img class="yi" style=" box-shadow: 20px 20px 10px #e4f4f7;" src=" zp6.jpg " alt="# ">
            <div class="datu"><img class="er " style=" box-shadow: 20px 20px 10px#e4f4f7;" src="zp4.jpg " alt="# "></div>
            <img class="san " style=" box-shadow: 20px 20px 10px #e4f4f7;" src="zp2.jpg " alt="# ">
        </div>
        <div class="fourth">
            <img class="fyi" style=" box-shadow: 20px 20px 10px #e4f4f7;" src=" zp1.jpg " alt="# ">
            <div class="fdatu">
                <img class="fer" style=" box-shadow: 20px 20px 10px#e4f4f7;" src="zp3.jpg" alt="#">
            </div>
            <img class="fsan" style=" box-shadow: 20px 20px 10px#e4f4f7;" src="zp5.jpg" alt="#">
        </div>
        <h4 id="JINENG"></h4>
        <div class="fifth">
            <div class="jineng">
                <p>技</p>
                <p>能</p>
            </div>
            <div class="shouhui">
                <div class="sshouhui">
                    <a href="https://baike.baidu.com/item/%E6%89%8B%E7%BB%98/7871056" target="blank">手绘 </a>
                </div>
            </div>
            <div class="ps">
                <div class="sps">
                    <a href="https://cn.bing.com/videos/search?q=ps&qpvt=ps&FORM=VDRE"> PS</a>
                </div>
            </div>
            <div class="ai">
                <div class="sai">
                    <a href="https://baike.baidu.com/item/Adobe%20Illustrator/2297548">AI</a>
                </div>
            </div>

        </div>
        <h5 id="LIANXIWO"></h5>
        <div class="last">
            <div class="xlianx">--联系--</div>
            <div class="fangs"> QQ - WECHAT - TEL </div>
        </div>
    </div>
</body>

</html>